<template>
  <div>
    <Header>
      <template v-slot:right>
        <div class="btn" @click="goTestRecord">测试记录</div>
      </template>
    </Header>
    <div class="test-center w1200">
      <el-tabs v-model="checkedTabs" tab-position="left" type="card">
        <el-tab-pane label="水平测试" name="test-levle">
          <div class="test-container">
            <div class="test-container-header flex-space-be">
              <div class="class-name">
                <span>
                  当前课程：{{ checkedBookData.edition_name }}-{{
                    checkedBookData.grade_name
                  }}
                </span>
              </div>
              <div>
                <span class="mr20"
                  >当前水平：<span class="score">{{
                    nearScore || nearScore == 0 ? `${nearScore}分` : "未测"
                  }}</span></span
                >
                <el-button
                  class="button button-bg-second"
                  :disabled="$store.getters.isTeacher"
                  @click="goTest"
                >
                  进入水平测试
                </el-button>
                <el-button
                  class="button button-bg-second"
                  @click="checkTypeDialog = true"
                >
                  打印测试试卷
                </el-button>
              </div>
            </div>
            <div class="test-container-info">
              <div class="info-echarts">
                <div class="mt20 info-header">近十次水平测试分数走势图</div>
                <div
                  style="width: 760px; height: 300px"
                  id="score-echarts"
                ></div>
              </div>
              <div class="info-table">
                <div class="mt20 mb20 info-header">测试记录</div>
                <div class="clear-float common-table common-pagination">
                  <el-table border :data="tableData" style="width: 100%">
                    <el-table-column
                      type="index"
                      label="序号"
                      :index="indexMethod"
                      width="100"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="category"
                      label="测试类型"
                      width="180"
                    >
                      <template slot-scope="scope">
                        <div>
                          {{ getCategoryName(scope.row.category) }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="start_time" label="测试时间">
                    </el-table-column>
                    <el-table-column prop="score" label="得分">
                    </el-table-column>
                    <el-table-column prop="score" label="说明">
                      <template slot-scope="scope">
                        <div>
                          <span
                            v-if="scope.row.score >= 0 && scope.row.score <= 14"
                            >很遗憾 你仅到达了黑铁段位
                          </span>
                          <span
                            v-if="scope.row.score > 14 && scope.row.score <= 28"
                            >很遗憾 你仅到达了青铜段位
                          </span>
                          <span
                            v-if="scope.row.score > 28 && scope.row.score <= 42"
                            >很遗憾 你仅到达了白银段位
                          </span>
                          <span
                            v-if="scope.row.score > 42 && scope.row.score <= 56"
                            >恭喜你 你的段位在黄金段位
                          </span>
                          <span
                            v-if="scope.row.score > 56 && scope.row.score <= 85"
                            >恭喜你 你的段位在钻石段位
                          </span>
                          <span
                            v-if="scope.row.score > 85 && scope.row.score <= 90"
                          >
                            恭喜你 你的段位在大师段位
                          </span>
                          <span
                            v-if="
                              scope.row.score > 90 && scope.row.score <= 100
                            "
                          >
                            太棒了 你到达了王者段位
                          </span>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>

                  <el-pagination
                    @current-change="handleCurrentChange"
                    v-if="paperData.total_page > 1"
                    class="fr"
                    background
                    :page-size="paperParams.pageSize"
                    layout="prev, pager, next"
                    :total="paperData.total_num"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="单词测试" name="test-word">
          <div class="test-container">
            <div class="test-container-header flex-space-be">
              <div class="class-name">
                <span>
                  当前课程：{{ checkedBookData.edition_name }}-{{
                    checkedBookData.grade_name
                  }}
                </span>
              </div>
            </div>
            <div class="test-container-info">
              <div>
                <div
                  class="test-item"
                  v-for="(item1, index1) in todayStudyData"
                  :key="index1"
                >
                  <h4 v-if="item1.category == 0" class="mb10">
                    <img src="@/assets/img/icon/memory.png" alt="" />
                    智能记忆
                  </h4>
                  <h4 v-if="item1.category == 1" class="mb10">
                    <img src="@/assets/img/icon/word-listen.png" alt="" />
                    智能词听
                  </h4>
                  <h4 v-if="item1.category == 2" class="mb10">
                    <img src="@/assets/img/icon/listen-write.png" alt="" />
                    智能听写
                  </h4>
                  <h4 v-if="item1.category == 3" class="mb10">
                    <img src="@/assets/img/icon/word-write.png" alt="" />
                    智能默写
                  </h4>
                  <div class="test-btn-item">
                    <div
                      v-for="(
                        item2, index2
                      ) in item1.student_strange_word_num_list"
                      :key="index2"
                      @click="goTest(item1, item2)"
                    >
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="bottom"
                        v-if="item2.word_num < 10"
                      >
                        <div
                          v-if="item2.test_type == 0"
                          slot="content"
                          class="tooltip-text"
                        >
                          请在今日已学单词达到 <br />
                          10个以后再进行测试
                        </div>
                        <div
                          v-if="item2.test_type == 1"
                          slot="content"
                          class="tooltip-text"
                        >
                          请在已学单词达到10个以后 <br />
                          再进行测试
                        </div>
                        <div
                          v-if="item2.test_type == 2"
                          slot="content"
                          class="tooltip-text"
                        >
                          请在生词量达到10个以后 <br />
                          再进行测试
                        </div>
                        <div
                          v-if="item2.test_type == 3"
                          slot="content"
                          class="tooltip-text"
                        >
                          请在熟词量达到10个以后 <br />
                          再进行测试
                        </div>
                        <div class="flex-space-be">
                          <span v-if="item2.test_type == 0">今日已学测试</span>
                          <span v-if="item2.test_type == 1">已学测试</span>
                          <span v-if="item2.test_type == 2">生词测试</span>
                          <span v-if="item2.test_type == 3">熟词测试</span>
                          <span class="number">
                            <span class="mr10">{{ item2.word_num }}</span>
                            <i class="font_family icon-jiantouloukong-you"></i>
                            <!-- <img
                              src="@/assets/img/icon/icon-circle-bg.png"
                              alt=""
                            /> -->
                          </span>
                        </div>
                      </el-tooltip>
                      <div
                        class="flex-space-be green-item"
                        :class="
                          $store.getters.isTeacher ? 'not-click' : 'click'
                        "
                        v-else
                      >
                        <span v-if="item2.test_type == 0">今日已学测试</span>
                        <span v-if="item2.test_type == 1">已学测试</span>
                        <span v-if="item2.test_type == 2">生词测试</span>
                        <span v-if="item2.test_type == 3">熟词测试</span>
                        <span class="number">
                          <span class="mr10">{{ item2.word_num }}</span>
                          <i class="font_family icon-jiantouloukong-you"></i>
                          <!-- <img src="@/assets/img/icon/green-right.png" alt="" /> -->
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="例句测试">
        <div class="test-container">例句测试</div>
      </el-tab-pane> -->
      </el-tabs>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="checkTypeDialog"
      @close="closeCheckTypeDialog"
      width="600px"
      center
      class="question-type"
    >
      <div>
        <el-form ref="form" :model="checkForm" label-width="80px">
          <el-form-item label="选择题型" v-if="checkedBookData.book_id != 600">
            <el-checkbox-group v-model="checkForm.questionType">
              <el-checkbox-button :label="1">英译汉</el-checkbox-button>
              <el-checkbox-button :label="2">汉译英</el-checkbox-button>
              <el-checkbox-button :label="5">默写</el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="选择单元">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="checkForm.unitList"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                :label="unit.unit_id"
                v-for="unit in unitList"
                :key="unit.unit_id"
                >{{ unit.unit_name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button button-bg-primary" @click="goPrintTest()"
          >前往预览</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getTestWordData, getPaperList, getUnitList } from "@/api/index";
export default {
  data() {
    return {
      checkedTabs: "test-levle",
      tableData: [],
      paperParams: {
        pageNum: 1,
        pageSize: 10,
      },
      paperData: {},
      todayStudyData: [],
      nearScore: null,
      checkedBookData: null,
      checkTypeDialog: false,
      checkForm: {
        questionType: [],
        unitList: [],
      },
      unitList: [],

      checkAll: false,
      isIndeterminate: true,
    };
  },
  components: {
    Header,
  },
  computed: {
    unitIdList() {
      return this.unitList.map((item) => {
        return item.unit_id;
      });
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkForm.unitList = val ? this.unitIdList : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.unitIdList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.unitIdList.length;
    },
    closeCheckTypeDialog() {
      let checkedUnit = JSON.parse(localStorage.getItem("checkedUnit"));
      if (checkedUnit) {
        let data = this.unitList.filter((item) => {
          return item.unit_id == checkedUnit.unit_id;
        });
        if (data.length > 0 && checkedUnit.unit_id) {
          this.checkForm.unitList = [checkedUnit.unit_id];
        }
      }
      this.checkForm.questionType = [];
      this.checkAll = false;
      this.isIndeterminate = true;
    },
    goPrintTest() {
      console.log(this.checkForm);
      this.$router.push({
        name: "printTest",
        query: {
          unitId:
            this.checkForm.unitList.length > 0
              ? this.checkForm.unitList.join(",")
              : this.unitIdList.join(","),
          category: 24,
          questionType:
            this.checkForm.questionType.length > 0
              ? this.checkForm.questionType.join(",")
              : [1, 2, 5].join(","),

          isPrint: 1,
        },
      });
    },
    handleCurrentChange(value) {
      this.paperParams.pageNum = value;
      this.getPaperList();
    },
    getCategoryName(category) {
      let data = this.$store.getters.categoryList.filter((item) => {
        return item.category == category;
      });
      if (data.length > 0) {
        return data[0].title;
      } else {
        return "";
      }
    },
    goTest(item1, item2) {
      if (this.$store.getters.isTeacher) {
        return;
      }
      let category = null;
      if (item1 && item2) {
        if (item2.word_num < 10) {
          return;
        }
        category = item1.category * 4 + 7 + item2.test_type;
      } else {
        category = 23;
      }

      this.$confirm("进入测试", "提示", {
        confirmButtonText: "极速模式",
        cancelButtonText: "普通模式",
        showClose: true,
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.$router.push({
            name: "quickTest",
            query: {
              category: category,
            },
          });
        })
        .catch((type) => {
          if (type != "close") {
            this.$router.push({
              name: "generalTest",
              query: {
                category: category,
              },
            });
          }
        });
    },
    goTestRecord() {
      this.$router.push({
        name: "testRecord",
      });
    },
    setScoreEcharts(res) {
      let echartsData = [];
      if (res.data.list.length > 0) {
        this.nearScore = res.data.list[0].score;
      } else {
        this.nearScore = null;
      }
      res.data.list.sort((a, b) => {
        return (
          new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
        );
      });
      echartsData = res.data.list;
      let option = {
        xAxis: {
          type: "category",
          data: echartsData.map((item) => {
            return item.start_time;
          }),
          axisLine: {
            lineStyle: {
              color: this.$store.getters.color_main,
              width: 2,
            },
          },
        },

        yAxis: {
          type: "value",
          max: 100,
          //设置轴线的属性
          axisLine: {
            lineStyle: {
              color: this.$store.getters.color_main,
              width: 2,
            },
          },
          //网格线样式
          splitLine: {
            show: true,
            lineStyle: {
              color: [this.$store.getters.color_main],
              opacity: 0.5,
              //   width: 1,
              //   type: "solid",
            },
          },
        },
        color: this.$store.getters.color_main,
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: echartsData.map((item) => {
              return item.score;
            }),
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" },
            //   ],
            // },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
            type: "line",
            label: {
              normal: {
                show: true,
                position: "top",
              },
            },
          },
        ],
      };
      this.$echarts
        .init(document.getElementById("score-echarts"))
        .setOption(option);
    },
    indexMethod(index) {
      return (
        (this.paperParams.pageNum - 1) * this.paperParams.pageSize + index + 1
      );
    },
    getTestWordData() {
      getTestWordData(this.checkedBookData.book_id).then((res) => {
        if (res.code == 200 && res.data) {
          this.todayStudyData = res.data;
        }
      });
    },
    getPaperList(fun) {
      let data = {
        page_require: {
          page_num: this.paperParams.pageNum,
          page_size: this.paperParams.pageSize,
        },
        category: 23,
        book_id: this.checkedBookData.book_id,
        unit_id: null,
      };
      getPaperList(data).then((res) => {
        if (res.code == 200 && res.data) {
          this.paperData = res.data;
          this.tableData = res.data.list;
          if (fun) {
            fun(res);
          }
        }
      });
    },
    getUnitList() {
      let params = {
        bookId: this.checkedBookData.book_id,
      };
      getUnitList(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.unitList = res.data;
          let checkedUnit = JSON.parse(localStorage.getItem("checkedUnit"));
          if (checkedUnit) {
            let data = this.unitList.filter((item) => {
              return item.unit_id == checkedUnit.unit_id;
            });
            if (data.length > 0 && checkedUnit.unit_id) {
              this.checkForm.unitList = [checkedUnit.unit_id];
            }
          }
        }
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.getTestWordData();
    this.getUnitList();
  },
  mounted() {
    this.getPaperList(this.setScoreEcharts);
  },
};
</script>